<template>
  <div>
    <div class="aside">
      <div class="title">审计云系统</div>
      <div class="collapse">
        <!-- <el-collapse v-model="activeName">
          <el-collapse-item v-for="(item,index) in collapseLost" :key="index" :name="item.name">
            <template slot="title" style="position: relative;">
              <div>{{ item.name }}</div>
              <div class="arrow_icon"></div>
            </template>
            <div class="childItem" v-for="child in item.children" @click="clickItem(child)"
              :class="[{ active: actvieItem == child.path }]">{{child.name}}</div>
          </el-collapse-item>
        </el-collapse> -->
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo zsh-menu" @open="handleopen"
          @close="handleclose" @select="handleselect" router>
          <template v-for="(item,index) in collapseLost">
            <el-submenu :index="index+''" v-if="item&&item.children">
              <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
              <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden"
                @click="clickItem(child)">
                {{child.name}}
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="item.path" @click="clickItem(item)"><i :class="item.iconCls"></i>{{item.name}}
            </el-menu-item>
          </template>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapGetters
  } from "vuex";
  import CloudSystem from '@/router/cloudSystem.js'
  export default {
    name: "questions",
    data() {
      return {
        actvieItem: "/student/customerDetails/customerDetails",
        collapseLost: CloudSystem,
        activeName: '',
        dynamicTag: [],
        tableData: [{}],
        dialogTableVisible: false,
      }
    },
    components: {

    },
    computed: {
      ...mapGetters({
        dynamicTags: ["dynamicTags"],
      }),
    },
    created() {
      this.actvieItem = this.$route.path;
      for (let i in this.collapseLost) {
        let children = this.collapseLost[i].children;
        for (let k in children) {
          if (children[k].path == this.$route.path) {
            this.activeName = this.collapseLost[i].name;
          }
        }
      }
      // console.log(CloudSystem);
      // this.dynamicTag = JSON.parse(JSON.stringify(this.dynamicTags))
    },
    mounted() {
      // console.log(CloudSystem)
    },
    methods: {
      handleselect(key, keyPath) {
        // // console.log(key);
        // // console.log(keyPath);
        // // return
        // this.dynamicTag = JSON.parse(JSON.stringify(this.dynamicTags))
        // // console.log("child******", child)
        // let tags = this.dynamicTag.some((item) => {
        //   return item.path == key;
        // })
        // if (tags) {
        //   this.$router.push({
        //     path: key
        //   });
        // } else {
        //   // console.log("88888888")
        //   this.dynamicTag.push(child);
        //   this.$router.push({
        //     path: key
        //   });
        //   let arr = JSON.parse(JSON.stringify(this.dynamicTag));
        //   this.$store.commit(this.$types.DYNAMICTAGS, arr);
        // }
      },
      handleopen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleclose(key, keyPath) {
        console.log(key, keyPath);
      },
      clickItem(child) {
        this.actvieItem = child.path;
        this.actvieName = child.name;
        this.dynamicTag = JSON.parse(JSON.stringify(this.dynamicTags))
        // console.log("child******", child)
        let tags = this.dynamicTag.some((item) => {
          return item.path == child.path;
        })
        if (tags) {
          this.$router.push({
            path: child.path
          });
        } else {
          // console.log("88888888")
          this.dynamicTag.push(child);
          this.$router.push({
            path: child.path
          });
          let arr = JSON.parse(JSON.stringify(this.dynamicTag));
          this.$store.commit(this.$types.DYNAMICTAGS, arr);
        }
        // console.log(this.dynamicTags)
        // if (this.dynamicTags.length == 1) {
        //   this.actvieItem = this.dynamicTags[0].path;
        // }
      },
    },
    watch: {
      $route(to, from) {
        // console.log(to, from)
        // this.activeName = to.name;
        // console.log(this.activeName)
        // // to , from 分别表示从哪跳转到哪，都是一个对象
        // // to.path  ( 表示的是要跳转到的路由的地址 eg: /home );
        for (let i in this.collapseLost) {
          let children = this.collapseLost[i].children;
          for (let k in children) {
            if (children[k].path == to.path) {
              this.activeName = this.collapseLost[i].name;
            }
          }
        }
      },
      '$route.path': function(newVal, oldVal) {
        // console.log(newVal)
        // console.log(oldVal)
        this.actvieItem = newVal;
        // this.activeName = newVal.name;
      }
    }
  }
</script>


<style lang="less" scoped="scoped">
  .aside {
    width: 300px;
    height: 100%;
    overflow-y: auto;
    background-color: #fff;
    margin-right: 25px;

    .title {
      margin: 0 auto;
      width: 270px;
      height: 52px;
      line-height: 52px;
      text-align: center;
      background: #338AFF;
      border-radius: 4px;
      color: #fff;
      margin-top: 17px;
      margin-bottom: 19px;

    }

    .collapse {
      margin: 0 auto;
      width: 270px;

      /deep/.el-menu {
        border: none;

        .el-menu-item,
        .el-submenu__title {
          height: 52px;
          line-height: 52px;
        }

        .is-opened {
          background: #F3F8FF;
        }
      }

      /deep/.el-collapse {
        border: none;

        .childItem {
          cursor: pointer;
        }

        .active {
          color: #338AFF;
        }

        .el-collapse-item__header {
          border: none;
          width: 270px;
          height: 52px;
          line-height: 52px;
          border-radius: 4px;
          padding-left: 43px;
          box-sizing: border-box;
        }

        .is-active {
          color: #4889FF;
          background: #F3F8FF;
        }

        .el-collapse-item__wrap {
          border: none;

          .el-collapse-item__content {
            padding: 0;
            // height: 52px;
            line-height: 52px;

            // padding-left: 43px;
            // box-sizing: border-box;
            &>div {
              padding-left: 43px;
              box-sizing: border-box;
            }
          }
        }
      }
    }
  }
</style>
